<script setup lang="ts">
import { Autoplay } from "swiper/modules";
import { SwiperSlide, Swiper } from "swiper/vue";

defineEmits<{
  select: [any];
}>();

defineProps<{
  list: any[];
}>();
</script>

<template>
  <SectionTitleM title="视频中心" more="了解更多>" />

  <ClientOnly>
    <Swiper
      loop
      centeredSlides
      :speed="500"
      :slidesPerView="1.5"
      :spaceBetween="5"
      :loopPreventsSlide="true"
      :modules="[Autoplay]"
      :autoplay="{ delay: 3000, disableOnInteraction: false }"
      class="videos-swiper"
    >
      <swiper-slide v-for="(item, index) in list" :key="index">
        <div class="relative w-full">
          <img :src="item.cover" class="w-full rounded-2xl aspect-124/63 object-cover" />

          <div
            class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-black/50 size-10 rounded flex-center rounded-full"
            @click="$emit('select', item)"
          >
            <Icon name="Play" class="text-white" />
          </div>
        </div>

        <p class="text-center mt-2.5 font-500">
          {{ item.title }}
        </p>

        <!-- <p class="text-center mt-2.5 text-#808080 text-xs">查看视频></p> -->
      </swiper-slide>
    </Swiper>
  </ClientOnly>
</template>

<style lang="less">
.videos-swiper {
  .swiper-slide {
    transform: scale(0.9);
    transition-duration: 200ms;

    &-active {
      transform: scale(1);
    }
  }
}
</style>
